<script setup>
import {onMounted, ref} from "vue";
import {list, remove, save} from "@/api/course"
import {ElMessage} from "element-plus";
import {teacherList} from "@/api/teacher";

onMounted(() => {
  list().then(res => {
    listData.value = res.data;
  })
})
let listData = ref()
let defaultProps = {
  children: 'child',
  label: 'name',
}
let add = () => {
  datas.value.pid = 0;
  save(datas.value).then(res => {
    ElMessage.success("添加成功！")
    list().then(res => {
      listData.value = res.data;
    })
  })
  dialogVisible.value = false

}
let dialogVisible = ref(false)
let datas = ref({
  "name": "",
  "pid": 0,
  "tId": 0
})
let addChildCourse = () => {
  save(datas.value).then(res => {
    ElMessage.success("添加成功！")
    list().then(res => {
      listData.value = res.data;
    })
  })
  addChild.value = false
}
let addChild = ref(false)
let removeById = (id) => {
  remove(id).then(res => {
    ElMessage.success("删除成功！")
    list().then(res => {
      listData.value = res.data;
    })
  })
}
let tList = ref()
let addCourse = () => {
  dialogVisible.value = true;
  teacherList().then(res => {
    tList.value = res.data;
    console.log(tList.value)
  })
}
</script>

<template>

  <div>
    <el-dialog
        v-model="dialogVisible"
        title="添加课程"
        width="30%"
    >
      <div>
        <el-input v-model="datas.name" placeholder="请输入课程名称"/>
        <select v-model="datas.tId" style="margin-top: 10px">
          <option v-for="itm in tList" :value="itm.id">{{ itm.nickname }}</option>
        </select>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="add">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
    <el-dialog
        v-model="addChild"
        title="添加知识点"
        width="30%"
    >
      <div>
        <el-input v-model="datas.name" placeholder="请输入知识点名称" @keyup.enter="addChildCourse"/>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addChild = false">取消</el-button>
        <el-button type="primary" @click="addChildCourse">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
    <h1>课程管理</h1>
    <div style="margin-bottom: 10px">
      <el-button @click="addCourse">添加课程</el-button>
    </div>
    <div>
      <el-tree
          :data="listData"
          :props="defaultProps"
      >
        <template #default="{ data }" @keyup.ctrl="datas.pid=data.id;addChild=true;">
          <div>
            {{ data.name }}
            <el-button v-if="data.pId==0" size="small" @click="removeById(data.id)">删除
            </el-button>
            <el-button v-if="data.pId==0" size="small" @click="datas.pid=data.id;addChild=true;">添加知识点
            </el-button>
            <el-button v-if="data.pId!=0" size="small" @click="removeById(data.id)">删除</el-button>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>

